"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { 
  Activity, 
  Zap, 
  Thermometer, 
  Shield, 
  TrendingUp, 
  Users,
  Clock,
  AlertTriangle,
  CheckCircle,
  Plus,
  Settings
} from "lucide-react"
import ProjectCreateForm from "@/components/projects/project-create-form"

interface ProjectSummary {
  id: string
  name: string
  customer: string
  status: string
  motorType: string
  power: string
  voltage: string
  progress: number
  lastUpdate: string
}

export function MotorControlDashboard() {
  const router = useRouter()
  const [showCreateForm, setShowCreateForm] = useState(false)
  
  // 模拟项目数据
  const projects: ProjectSummary[] = [
    {
      id: "1",
      name: "风机控制器V2.0",
      customer: "苏州成就智能科技有限公司",
      status: "active",
      motorType: "无刷电机",
      power: "500W",
      voltage: "24V",
      progress: 25,
      lastUpdate: "2024-01-15"
    },
    {
      id: "2", 
      name: "工业风扇控制",
      customer: "深圳电子科技",
      status: "testing",
      motorType: "步进电机",
      power: "1500W",
      voltage: "48V",
      progress: 45,
      lastUpdate: "2024-01-14"
    },
    {
      id: "3",
      name: "伺服驱动系统",
      customer: "上海自动化设备",
      status: "completed",
      motorType: "伺服电机",
      power: "3000W",
      voltage: "380V",
      progress: 100,
      lastUpdate: "2024-01-10"
    }
  ]

  const getStatusColor = (status: string) => {
    switch (status) {
      case "active": return "bg-green-100 text-green-800"
      case "testing": return "bg-yellow-100 text-yellow-800"
      case "completed": return "bg-blue-100 text-blue-800"
      default: return "bg-gray-100 text-gray-800"
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "active": return <Activity className="h-4 w-4" />
      case "testing": return <Clock className="h-4 w-4" />
      case "completed": return <CheckCircle className="h-4 w-4" />
      default: return <AlertTriangle className="h-4 w-4" />
    }
  }

  const stats = [
    {
      title: "总项目数",
      value: "12",
      change: "+2",
      icon: <Settings className="h-8 w-8 text-blue-600" />,
      color: "bg-blue-50"
    },
    {
      title: "活跃项目",
      value: "8",
      change: "+1",
      icon: <Activity className="h-8 w-8 text-green-600" />,
      color: "bg-green-50"
    },
    {
      title: "测试中",
      value: "3",
      change: "0",
      icon: <Clock className="h-8 w-8 text-yellow-600" />,
      color: "bg-yellow-50"
    },
    {
      title: "已完成",
      value: "1",
      change: "+1",
      icon: <CheckCircle className="h-8 w-8 text-purple-600" />,
      color: "bg-purple-50"
    }
  ]

  if (showCreateForm) {
    return (
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Button 
            variant="outline" 
            onClick={() => setShowCreateForm(false)}
          >
            ← 返回仪表板
          </Button>
        </div>
        <ProjectCreateForm 
          onCreateProject={(data) => {
            console.log("Creating project:", data)
            setShowCreateForm(false)
          }} 
        />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">电机控制系统</h1>
          <p className="text-gray-600 mt-2">管理和监控电机控制项目</p>
        </div>
        <Button 
          onClick={() => setShowCreateForm(true)}
          className="flex items-center gap-2"
        >
          <Plus className="h-4 w-4" />
          创建新项目
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <Card key={index} className="border-0 shadow-sm">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                  <p className="text-2xl font-bold text-gray-900 mt-1">{stat.value}</p>
                  <p className="text-sm text-green-600 mt-1">{stat.change}</p>
                </div>
                <div className={`p-3 rounded-full ${stat.color}`}>
                  {stat.icon}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 最近项目 */}
      <Card className="border-0 shadow-sm">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="h-5 w-5" />
            最近项目
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {projects.map((project) => (
              <div 
                key={project.id} 
                className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                onClick={() => {
                  // 使用直接跳转方式
                  window.location.href = `/projects/${project.id}`;
                }}
              >
                <div className="flex items-center gap-4">
                  <div className={`p-2 rounded-full ${getStatusColor(project.status)}`}>
                    {getStatusIcon(project.status)}
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-900">{project.name}</h3>
                    <p className="text-sm text-gray-600">{project.customer}</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-6">
                  <div className="text-right">
                    <p className="text-sm text-gray-600">电机类型</p>
                    <p className="font-medium">{project.motorType}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-gray-600">功率/电压</p>
                    <p className="font-medium">{project.power} / {project.voltage}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-gray-600">进度</p>
                    <div className="flex items-center gap-2">
                      <div className="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div 
                          className={`h-full rounded-full ${
                            project.progress === 100 ? 'bg-green-500' : 
                            project.progress > 50 ? 'bg-blue-500' : 'bg-yellow-500'
                          }`}
                          style={{ width: `${project.progress}%` }}
                        />
                      </div>
                      <span className="text-sm font-medium">{project.progress}%</span>
                    </div>
                  </div>
                  <Badge className={getStatusColor(project.status)}>
                    {project.status === 'active' ? '进行中' : 
                     project.status === 'testing' ? '测试中' : '已完成'}
                  </Badge>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 快速操作 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="border-0 shadow-sm cursor-pointer hover:shadow-md transition-shadow">
          <CardContent className="p-6 text-center">
            <Zap className="h-12 w-12 text-yellow-600 mx-auto mb-4" />
            <h3 className="font-semibold text-gray-900 mb-2">电机参数配置</h3>
            <p className="text-sm text-gray-600">配置电机基础参数和保护设置</p>
          </CardContent>
        </Card>

        <Card className="border-0 shadow-sm cursor-pointer hover:shadow-md transition-shadow">
          <CardContent className="p-6 text-center">
            <Shield className="h-12 w-12 text-red-600 mx-auto mb-4" />
            <h3 className="font-semibold text-gray-900 mb-2">保护设置</h3>
            <p className="text-sm text-gray-600">设置电机保护参数和安全阈值</p>
          </CardContent>
        </Card>

        <Card className="border-0 shadow-sm cursor-pointer hover:shadow-md transition-shadow">
          <CardContent className="p-6 text-center">
            <Thermometer className="h-12 w-12 text-blue-600 mx-auto mb-4" />
            <h3 className="font-semibold text-gray-900 mb-2">环境监控</h3>
            <p className="text-sm text-gray-600">监控工作环境温度和湿度</p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}